<script setup lang="ts">
import html2canvas from "html2canvas";
import DictTag from "@/components/DictTag/index.vue";
import { useDict } from "@/utils/dict";
import type {
  Student,
  StudentEducationInfo,
  StudentFamilyInfo,
  StudentScoreInfo,
} from "@/types/user";
import { parseTime } from "@/utils/ruoyi";
import exportPDF from "@/utils/exportPDF";
import "./registrant.scss";

const props = defineProps<{
  student?: Student &
    StudentScoreInfo & {
      familyMembers?: StudentFamilyInfo[];
      educationalExperience?: StudentEducationInfo[];
    };
}>();

// Add the console.log statement here
console.log("Student key-value pairs:", Object.entries(props.student || {}));

async function handleExport() {
  const promise = Promise.all([
    html2canvas(document.getElementById("page1")!, {
      logging: false,
      scale: window.devicePixelRatio * 3,
    }),
    html2canvas(document.getElementById("page2")!, {
      logging: false,
      scale: window.devicePixelRatio * 3,
    }),
  ]);
  exportPDF(await promise, "l", "cm", [39.01, 27]);
}

defineExpose({ onExport: handleExport });

const {
  sys_user_sex,
  student_disciplines,
  student_nation,
  student_political,
  student_language,
} = useDict(
  "sys_user_sex",
  "student_disciplines",
  "student_nation",
  "student_political",
  "student_language"
);

// 获取不为空的两个副科

// 得出副科的数组
const viceScores = computed(() => {
  const subjects = {
    politics: props.student?.politics,
    geography: props.student?.geography,
    biology: props.student?.biology,
    chemistry: props.student?.chemistry,
  };
  console.log("学生的副科", subjects);
  return Object.entries(subjects)
    .filter(
      ([_, value]) =>
        value !== undefined &&
        value !== null &&
        value !== "" &&
        !/^\s+$/.test(value)
    )
    .reduce(
      (acc, [key, value]) => ({ ...acc, [key]: value }),
      {} as Record<string, number>
    );
});

// 计算第一个和第二个非空值
const firstViceSubject = computed(() => {
  const entries = Object.entries(viceScores.value);
  return entries.length > 0 ? { [entries[0][0]]: entries[0][1] } : null;
});

const secondViceSubject = computed(() => {
  const entries = Object.entries(viceScores.value);
  return entries.length > 1 ? { [entries[1][0]]: entries[1][1] } : null;
});

// 新增：科目名称映射
const subjectNameMap: Record<string, string> = {
  chemistry: "化学",
  biology: "生物",
  politics: "政治",
  geography: "地理",
};

// 新增：获取中文科目名称的函数
const getChineseSubjectName = (englishName: string): string => {
  return subjectNameMap[englishName] || englishName;
};

// 添加 watch 来监听 props.student 的变化
watch(
  () => props.student,
  (newValue) => {
    if (newValue) {
      const subjects = {
        politics: newValue.politics,
        geography: newValue.geography,
        biology: newValue.biology,
        chemistry: newValue.chemistry,
      };
      console.log("数据加载后的副科:", subjects);
    }
  },
  { immediate: true, deep: true }
);
</script>

<template>
  <div id="page1" class="pdf-page">
    <div class="pdf-col present-page">
      <br />
      <h1>
        <span v-for="(i, index) in '填表说明'" :key="index">{{ i }}</span>
      </h1>
      <br />
      <p>
        1.本表系学生档案。表内所列项目，要实事求是地认真填写。书写时一律用黑色签字笔或黑色钢笔，字迹要清楚工整，不得任意涂改。
      </p>
      <p>
        2.表内所列项目，要全部填写，如有情况不明无法填写时，应写"不清"、"不详"及其原因，如无该项情况，统一填写"无"。
      </p>
      <p>3.表格内的年月等使用到数字的一律使用阿拉伯数字。</p>
      <p>
        4.入学方式在对应栏目下打勾。新高考改革省份高考成绩需填写首选和再选科目名称及分数。
      </p>
      <p>
        5."参加学生组织及任职情况"和"受到何种奖励或处分"栏目，均填写大学入学之前的情况。
      </p>
      <p>
        6."学习经历"自入小学时起，依时间顺序详细填写，年月要衔接，每个学习阶段只填写一所学校（填写毕业证书上的学校名称，学习年限包含复读或留级时间）。
      </p>
      <p>7.贴最近一寸正面半身脱帽彩色照片。</p>
    </div>
    <div class="pdf-col cover-page">
      <header>
        <img src="@/assets/images/title.png" alt="" />
        <h1>新 生 入 学 登 记 表</h1>
      </header>
      <main>
        <div class="cover-col">
          <div>院 系:</div>
          <div>
            {{ student?.studentCollege }}
          </div>
        </div>
        <div class="cover-col">
          <div>专 业:</div>
          <div>{{ student?.studentMajor }}</div>
        </div>
        <div class="cover-col">
          <div>学 制:</div>
          <div>{{ student?.educationalYear }}</div>
        </div>
        <div class="cover-col">
          <div>年 级:</div>
          <div>{{ student?.studentGrade }}</div>
        </div>
        <div class="cover-col">
          <div>姓 名:</div>
          <div>{{ student?.studentName }}</div>
        </div>
        <div class="cover-col">
          <div>学 号:</div>
          <div>{{ student?.studentCode }}</div>
        </div>
      </main>

      <footer>
        <div class="date">填表日期：<span> 2024 年 9 月 2 日</span></div>
        <span>学生工作部（处） 印制</span>
      </footer>
    </div>
  </div>
  <br />
  <div id="page2" class="pdf-page">
    <div class="pdf-col" style="padding-right: 1.5em">
      <div class="word-table page1">
        <div class="table-label">
          <span v-for="(i, index) in '姓名'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content">
          {{ student?.studentName }}
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '性别'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content">
          <DictTag :options="sys_user_sex" :value="student?.sex" type="text" />
        </div>

        <div class="table-content table-row-3" />

        <div class="table-label">
          <span v-for="(i, index) in '民族'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content">
          <DictTag
            :options="student_nation"
            :value="student?.studentNation"
            type="text"
          />
        </div>

        <div class="table-label">
          <span v-for="(i, index) in '籍贯'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content">
          {{ student?.nativePlace }}
        </div>

        <div class="table-label">
          <span v-for="(i, index) in '出生年月'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content">
          {{ parseTime(student?.birthday || "", "{y}年{m}月") }}
        </div>

        <div class="table-label">
          <span v-for="(i, index) in '政治面貌'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content">
          <DictTag
            :options="student_political"
            :value="student?.studentPolitical"
            type="text"
          />
        </div>

        <div class="table-label">
          <span v-for="(i, index) in '身份证号'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content table-col-4">
          {{ student?.studentIdCard }}
        </div>

        <div class="table-label">
          <span v-for="(i, index) in '考生科类'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content">
          <DictTag
            :options="student_disciplines"
            :value="student?.disciplines"
            type="text"
          />
        </div>

        <div class="table-label">
          <span v-for="(i, index) in '考生号'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content table-col-4">
          {{ student?.studentExamCode }}
        </div>

        <div class="table-label">
          <span v-for="(i, index) in '外语语种'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content">
          <DictTag
            :options="student_language"
            :value="student?.foreignLanguage"
            type="text"
          />
        </div>

        <div class="table-label">
          <span v-for="(i, index) in '培养方式'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content table-col-4">普通全日制（非定向）</div>

        <div class="table-label">
          <span v-for="(i, index) in '学历层次'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content">大学本科</div>

        <div class="table-label">
          <span v-for="(i, index) in '生源地'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content table-col-4">
          {{ student?.studentFrom }}
        </div>

        <div class="table-label">
          <span v-for="(i, index) in '健康状况'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content">
          {{ student?.heath }}
        </div>

        <div class="table-label">
          <span v-for="(i, index) in '家庭地址'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content table-col-8">
          {{ student?.nowAddress }}
        </div>

        <div class="table-label table-row-2">
          <span v-for="(i, index) in '入学方式'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content">高考入学</div>
        <div class="table-content">预科升入</div>
        <div class="table-content table-col-2">专升本</div>
        <div class="table-content table-col-1">转学</div>
        <div class="table-content table-col-1">复学</div>

        <div class="table-content">
          <img
            v-if="student?.admissionMethod === '高考入学'"
            src="@/assets/images/checked.png"
            alt="checked"
            style="height: 1em; width: 1em"
          />
        </div>
        <div class="table-content">
          <img
            v-if="student?.admissionMethod === '预科升入'"
            src="@/assets/images/checked.png"
            alt="checked"
            style="height: 1em; width: 1em"
          />
        </div>
        <div class="table-content table-col-2">
          <img
            v-if="student?.admissionMethod === '专升本'"
            src="@/assets/images/checked.png"
            alt="checked"
            style="height: 1em; width: 1em"
          />
        </div>
        <div class="table-content table-col-1">
          <img
            v-if="student?.admissionMethod === '转学'"
            src="@/assets/images/checked.png"
            alt="checked"
            style="height: 1em; width: 1em"
          />
        </div>
        <div class="table-content table-col-1">
          <img
            v-if="student?.admissionMethod === '复学'"
            src="@/assets/images/checked.png"
            alt="checked"
            style="height: 1em; width: 1em"
          />
        </div>

        <div class="table-label table-row-4">
          <span v-for="(i, index) in '高考成绩'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content table-col-1">语文</div>
        <div class="table-content table-col-1">数学</div>
        <div class="table-content table-col-1">外语</div>
        <div class="table-content table-col-1">综合</div>
        <div class="table-content table-col-1">专业成绩</div>
        <div class="table-content table-col-1">政策加分</div>
        <div class="table-content">总分</div>
        <div class="table-content table-col-1">
          {{ student?.chinese }}
        </div>
        <div class="table-content table-col-1">
          {{ student?.math }}
        </div>
        <div class="table-content table-col-1">
          {{ student?.language }}
        </div>
        <div class="table-content table-col-1">
          {{ student?.comprehensive }}
        </div>
        <div class="table-content table-col-1">
          {{ student?.majorScore }}
        </div>
        <div class="table-content table-col-1">
          {{ student?.policyPoints }}
        </div>
        <div class="table-content">
          {{ student?.featureScore || student?.zongfen }}
        </div>

        <div class="table-content table-row-2 table-col-1">首选<br />科目</div>
        <div class="table-content table-row-1 table-col-2">历史</div>
        <div class="table-content table-row-1 table-col-1">
          {{ props.student?.history }}
        </div>
        <div class="table-content table-row-2 table-col-1">
          再选科目名称及分数
        </div>
        <div class="table-content table-row-1 table-col-1">
          <span v-if="firstViceSubject">{{
            getChineseSubjectName(Object.keys(firstViceSubject)[0])
          }}</span>
        </div>
        <div class="table-content table-row-1">
          <span v-if="firstViceSubject">{{
            Object.values(firstViceSubject)[0]
          }}</span>
        </div>
        <div class="table-content table-row-1 table-col-2">物理</div>
        <div class="table-content table-row-1 table-col-1">
          {{ props.student?.physics }}
        </div>
        <div class="table-content table-row-1 table-col-1">
          <span v-if="secondViceSubject">{{
            getChineseSubjectName(Object.keys(secondViceSubject)[0])
          }}</span>
        </div>
        <div class="table-content table-row-1">
          <span v-if="firstViceSubject">{{
            Object.values(secondViceSubject)[0]
          }}</span>
        </div>

        <div class="table-label table-col-3">
          <span v-for="(i, index) in '特长或爱好'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content table-col-7">
          {{ student?.hobbies }}
        </div>

        <div class="table-label table-col-3">
          <span
            v-for="(i, index) in '何年何月在何地加入中国共青团'"
            :key="index"
            >{{ i }}</span
          >
        </div>
        <div class="table-content table-col-7">
          {{ student?.communistYouthLeague }}
        </div>

        <div class="table-label table-col-3">
          <span
            v-for="(i, index) in '何年何月在何地加入中国共产党'"
            :key="index"
            >{{ i }}</span
          >
        </div>
        <div class="table-content table-col-7">
          {{ student?.partyChina }}
        </div>

        <div class="table-label table-col-3">
          <span
            v-for="(i, index) in '何年何月在何地参加学生组织及任职情况'"
            :key="index"
            >{{ i }}</span
          >
        </div>
        <div class="table-content table-col-7">
          {{ student?.studentOrganization }}
        </div>

        <div class="table-label table-col-3">
          <span
            v-for="(i, index) in '何年何月在何地受到何种奖励或处分'"
            :key="index"
            >{{ i }}</span
          >
        </div>
        <div class="table-content table-col-7">
          {{ student?.rewardsPunishment }}
        </div>
      </div>
    </div>
    <div class="pdf-col" style="padding-left: 1.5em">
      <div class="word-table page2">
        <div class="table-label table-col-8">
          家庭主要成员及主要社会关系情况
        </div>
        <div class="table-label">关系</div>
        <div class="table-label">姓名</div>
        <div class="table-label">民族</div>
        <div class="table-label" style="min-width: 5.5em">政治面貌</div>
        <div class="table-label table-col-2">工作单位及职务</div>
        <div class="table-label table-col-2">联系电话</div>

        <template
          v-for="(_, index) in new Array(7)"
          :key="student?.familyMembers?.at(index)?.id || index"
        >
          <div class="table-content">
            {{ student?.familyMembers?.at(index)?.relationship }}
          </div>
          <div class="table-content">
            {{ student?.familyMembers?.at(index)?.name }}
          </div>
          <div class="table-content">
            <DictTag
              :options="student_nation"
              :value="student?.familyMembers?.at(index)?.nation"
              type="text"
            />
          </div>
          <div class="table-content">
            <DictTag
              :options="student_political"
              :value="student?.familyMembers?.at(index)?.political"
              type="text"
            />
          </div>
          <div class="table-content table-col-2">
            {{ student?.familyMembers?.at(index)?.unitAndPosition }}
          </div>
          <div class="table-content table-col-2">
            {{ student?.familyMembers?.at(index)?.tel }}
          </div>
        </template>

        <div class="table-label table-col-8" style="grid-column-start: span 8">
          学习经历（从小学入学填起）
        </div>
        <div class="table-label table-col-3" style="grid-column-start: span 3">
          起止年月
        </div>
        <div class="table-label table-col-4" style="grid-column-start: span 4">
          学校名称
        </div>
        <div class="table-label">证明人</div>
        <template
          v-for="(_, index) in new Array(7)"
          :key="student?.educationalExperience?.at(index)?.id || index"
        >
          <div
            class="table-content table-col-3"
            style="grid-column-start: span 3"
          >
            {{ student?.educationalExperience?.at(index)?.startEndTime }}
          </div>
          <div
            class="table-content table-col-4"
            style="grid-column-start: span 4"
          >
            {{ student?.educationalExperience?.at(index)?.schoolName }}
          </div>
          <div class="table-content">
            {{ student?.educationalExperience?.at(index)?.certifier }}
          </div>
        </template>

        <div
          class="table-content table-col-4 table-row-4"
          style="flex-direction: column; justify-content: space-between"
        >
          <span style="text-align: justify">
            <b>本人承诺：</b
            >以上填报内容均真实、准确、有效。并对以上所填内容的真实性和准确性负责。
          </span>
          <span class="flex flex-col w-full items-end">
            <span style="width: 8em; margin-bottom: 1em">签名：</span>
            <span
              style="width: 8em; text-align: justify; text-align-last: justify"
              >年 月 日</span
            >
          </span>
        </div>
        <div
          class="table-content table-col-4 table-row-4"
          style="
            flex-direction: column;
            align-items: start;
            justify-content: space-between;
          "
        >
          <b>院（系）盖章：</b>
          <span class="w-full flex flex-col items-center">
            <span style="margin-bottom: 1em">（公章）</span>
            <span
              style="width: 8em; text-align: justify; text-align-last: justify"
              >年 月 日</span
            >
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import "./registrant.scss";
</style>
